<template>
	<div id="historys">
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko">
					<van-icon name="arrow-left" @click="myzj" />
				</div>
				<div slot="title" class="cellbox">足迹</div>
				<div class="del" @click="delBtn" v-if="isKode">
					<van-icon name="delete-o" size="20px" />
				</div>
				<div class="del" @click="delBtn" v-else>完成</div>
			</van-cell>
		</div>

	<div style="margin-top: 50px;">
		<van-panel title="今日足迹">
			<div class="its" v-for="(item,index) in historysArr" :key="index">
				<div class="fuxuan" v-show="blockBtn">
					<van-checkbox-group v-model="result">
						<van-checkbox :name="item" checked-color="#343434" @click="onsub(item.id)"></van-checkbox>
					</van-checkbox-group>
				</div>
				<div class="its-items">
					<img :src="item.image" class="img" />
					<div class="jg">￥{{item.price}}</div>
				</div>
			</div>
		</van-panel>
		</div>
		<van-submit-bar button-text="删除按钮" @submit="onSubmit" button-color="#343434" v-show="blockBtn">
			<div style="width:170px;"></div>
		</van-submit-bar>
	</div>
</template>
<!-- 
  浏览记录会存在一个BUG，当你多次浏览同一个商品时在缓存记录只会出现一次
  当你删除时它只会删除一个，造成了没删掉的错觉，所以应该删除一整个类，
  但接口没提供
 -->
<script>
	import {
		Button
	} from 'vant';
	import {
		Cell,
		CellGroup
	} from 'vant';
	import {
		Icon
	} from 'vant';
	import {
		Panel,
		SubmitBar,
		Checkbox,
		CheckboxGroup,
		Toast
	} from 'vant';
	export default {
		data() {
			return {
				user: null,
				nameid: null,
				historysArr: [],
				checked: false,
				result: [],
				isKode: true,
				blockBtn: false,
				product_id: '',
				ids: '',
				tar: ''
			}
		},
		components: {
			[Button.name]: Button,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Panel.name]: Panel,
			[SubmitBar.name]: SubmitBar,
			[Checkbox.name]: Checkbox,
			[CheckboxGroup.name]: CheckboxGroup,
			[Toast.name]: Toast,
		},
		created() {
			this.getHistory()
		},
		methods: {
			myzj() {
				this.$router.push({
					path: '/my'
				})
			},
			getHistory() {
				this.$axios.get('http://116.63.80.218/users/history', {
					params: {
						userId: this.$store.state.nameId.userid
					}
				}).then(res => {
					console.log(res)
					if (res.status == 200) {
						console.log(res.data.tody)
						for (let i = 0; i < res.data.tody.length; i++) {
							this.historysArr.push(res.data.tody[i])
						}
						// console.log(this.historysArr)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 点击弹起删除按钮
			delBtn() {
				this.isKode = !this.isKode
				if (this.isKode == false) {
					this.blockBtn = true
				} else {
					this.blockBtn = false
				}

			},
			onsub(id) {
				this.ids = id
			},
			onSubmit() {
				console.log(this.ids)
				this.$axios.get('http://116.63.80.218/users/del/history', {
					params: {
						userId: this.$store.state.nameId.userid,
						historyId: this.ids
					}
				}).then(res => {
					console.log(this.historysArr)
					for (let i = 0; i < this.historysArr.length; i++) {
						if (this.historysArr[i].id == this.ids) {
							this.historysArr.splice(i, 1)
						}
					}
					Toast({
						message: '删除足迹成功',
						duration: 700
					});
				}).catch(err => {
					console.log(err)
				})
			}
		},

	}
</script>

<style lang="less" scoped>
	@width: 100vw;

	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;

		.cellbox {
			font-size: 15px;
			position: absolute;
			left: 50%;
			margin-left: -7px;
		}

		.iconko {
			font-size: 20px;
		}

		.del {
			width: 30px;
			height: 25px;
			height: ;
			float: right;
		}
	}

	.its {
		display: inline-block;
		width: 120px;
		height: 130px;
		margin-right: 5px;
		margin-bottom: 15px;
		position: relative;
		.its-items {
			width: 120px;
			height: 140px;
			border: 1px solid;

			.img {
				width: 100%;
				height: 110px;
			}

			.jg {
				text-align: center;
			}
		}
	}

	.fuxuan {
		position: absolute;
		top: 8px;
		left: 10px;
		z-index: 9999999999;
	}
</style>
